<template>
    <div>
        <el-dialog v-model="innerVisible" :width="isMobile ? '1150' : '60%'" title="自动断保客户" append-to-body
            :close-on-click-modal="false">
            <div style="margin-bottom: 20px">
                <span>客户名称：</span>
                <el-input v-model="cxbdkhmc" placeholder="请输入客户名称" @input="changekhmc"
                    style="width: 300px; margin-left: 10px"></el-input>
                <span style="margin-left: 20px">所属分组：</span>
                <el-select v-model="deptId" class="m-2" @change="changedeptId" placeholder="请选择" style="width: 240px"
                    clearable>
                    <el-option v-for="item in deptoptions" :key="item.deptId" :label="item.deptName"
                        :value="item.deptId" />
                </el-select>
                <span style="margin-left: 20px">所属商务：</span>
                <el-select clearable @focus="focussaleId" @change="searchlist" v-model="saleId" class="m-2"
                    placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in xsoptions" :key="item.saleId" :label="item.saleName"
                        :value="item.saleId" />
                </el-select>
            </div>
            <tableComponent class="set-height" :table-header="tableHeader" height="400" :table-data="tableData"
                v-model:page-info="pageInfo" @pageChange="handlePageChange">
                <template #sssw>
                    <el-table-column label="所属商务" fixed="right" align="center">
                        <template #default="scope">
                            <div>
                                {{
                                    scope.row.saleName +
                                    '|' +
                                    scope.row.deptName
                                }}
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template #operate>
                    <el-table-column label="操作" fixed="right" align="center">
                        <template #header>
                            操作
                            <el-tooltip class="box-item" effect="dark" content="一键续保所选客户所有方案" placement="top">
                                <el-icon>
                                    <WarningFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>
                        <template #default="scope">
                            <div style="
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-around;
                                ">
                                <div class="blue pointer" @click="toyjxbdetail(scope.row)">
                                    查看详情
                                </div>
                                <div class="blue pointer" @click="yjxb(scope.row)">
                                    一键续保
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </template>
            </tableComponent>
            <el-dialog v-model="innerVisibleend" :width="isMobile ? '1150' : '60%'" title="一键续保" append-to-body
                :close-on-click-modal="false">
                <div class="top">
                    <div class="text">
                        一键续保当前公司各方案的系统自动减保人员，不包含后续操作过投保的人员
                    </div>
                    <el-button type="primary" @click="yjxbc">一键续保</el-button>
                </div>
                <tableComponent class="set-height" :table-header="tableHeader1" height="500" noPagination="true"
                    :table-data="tableData1" v-model:page-info="pageInfo1" @pageChange="handlePageChange1">
                </tableComponent>
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import tableComponent from '@/components/tableComponent/index.vue'
import { ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { shake } from '../../utils/utils'
import {
    getperiodinsuronekeylistapi,
    periodinsuronekeyensureapi,
    getperiodinsuronekeydetailapi
} from '@/api/operationHomepage.ts'
import { getDeptList, getSalesmanList } from '../../api/clients/signClient'
const isMobile = ref((window as any).isMobile)

const deptId = ref('')
const saleId = ref('')
const changedeptId = () => {
    saleId.value = ''
    xsoptions.value = []
    searchlist()
}
const focussaleId = () => {
    if (deptId.value === '') {
        ElMessage({
            type: 'warning',
            message: '请先选择部门'
        })
    } else {
        getSalesmanList({
            auditStatus: 1,
            deptId: deptId.value
        }).then((res: any) => {
            xsoptions.value = res
        })
    }
}
const xsoptions = ref<any>([])
const detailtype = ref(null)
const toyjxbdetail = (val: any) => {
    pageInfo1.value.pageNum = 1
    pageInfo1.value.pageSize = 10
    pageInfo1.value.total = 0
    console.log(val, 'valvalvalvalvlavlavlalvalv')
    innerVisibleend.value = true
    companyId.value = val.companyId
    detailtype.value = val.onekeyEnsureType
    getperiodinsuronekeydetail(val.onekeyEnsureType)
}
const innerVisibleend = ref(false)
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})

const yjxb = (val: any) => {
    console.log(val, '一键续保')
    ElMessageBox.confirm('确定一键续保吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            periodinsuronekeyensureapi({ companyId: val.companyId, onekeyEnsureType: val.onekeyEnsureType }).then(
                (res: any) => {
                    console.log(res, '一键续保成功')
                    if (res.isEnoughBalance === false) {
                        ElMessage({
                            type: 'warning',
                            message: '账户余额不充足，续保失败',
                        })
                    } else {
                        ElMessage({
                            type: 'success',
                            message: '一键续保成功',
                        })
                    }
                    innerVisible.value = false
                }
            )
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消一键续保'
            })
        })
}
const yjxbc = () => {
    ElMessageBox.confirm('确定一键续保吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            periodinsuronekeyensureapi({ companyId: companyId.value, onekeyEnsureType: detailtype.value }).then(
                (res: any) => {
                    console.log(res, '一键续保成功')
                    if (res.isEnoughBalance === false) {
                        ElMessage({
                            type: 'warning',
                            message: '账户余额不充足，续保失败',
                        })
                    } else {
                        ElMessage({
                            type: 'success',
                            message: '一键续保成功',
                        })
                    }
                    innerVisibleend.value = false
                }
            )
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消一键续保'
            })
        })
}
const cxbdsearch = () => {
    pageInfo.value.pageNum = 1
    pageInfo.value.pageSize = 10
    pageInfo.value.total = 0
    if (cxbdkhmc.value === '') {
        ElMessage({
            type: 'warning',
            message: '请输入客户名称'
        })
        return
    }
    searchlist()
    innerVisible.value = true
}

const changekhmc = () => {
    shake(searchlist, 400)
}
const searchlist = () => {
    getperiodinsuronekeylistapi({
        companyName: cxbdkhmc.value,
        pageSize: pageInfo.value.pageSize,
        pageNum: pageInfo.value.pageNum,
        deptId: deptId.value,
        saleId: saleId.value
    }).then((res: any) => {
        console.log(res, '减保列表')
        tableData.value = res.list
        pageInfo.value.total = res.total
    })
}
const cxbdkhmc = ref('')
const emits = defineEmits(['update:show'])
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const pageInfo1 = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const tableHeader = ref([
    {
        label: '客户名称',
        prop: 'companyName',
        fixed: 'left'
    },
    {
        label: '减保人数',
        prop: 'total'
    },
    {
        label: '减保方案数量',
        prop: 'totalPlans'
    },
    {
        label: '减保类型',
        prop: 'msg'
    },
    {
        label: '自动减保时间',
        prop: 'insurStartDate'
    },
    {
        label: '所属商务',
        prop: 'sssw'
    },
    {
        label: '操作',
        prop: 'operate'
    }
])
const tableHeader1 = ref([
    {
        label: '派遣单位',
        prop: 'serveCompanyName'
    },
    {
        label: '被保人',
        prop: 'userName'
    },
    {
        label: '身份证号',
        prop: 'idCardNo'
    },
    {
        label: '工种名称',
        prop: 'occupationName'
    },
    {
        label: '工种等级',
        prop: 'occupationLevel'
    },
    {
        label: '工种编码',
        prop: 'code'
    },
    {
        label: '在保开始时间',
        prop: 'insurStartTime'
    },
    {
        label: '在保结束时间',
        prop: 'insurEndTime'
    }
])
const tableData = ref<any>([])
const tableData1 = ref<any>([])
const outerVisible = ref(false)
const innerVisible = ref(false)
const handlePageChange = () => {
    console.log('分页')
    searchlist()
}
const handlePageChange1 = () => {
    console.log('分页')
    // getperiodinsuronekeydetail()
}
const companyId = ref<any>()
const getperiodinsuronekeydetail = (type: number | string) => {
    getperiodinsuronekeydetailapi({
        companyId: companyId.value,
        onekeyEnsureType: type
    }).then((res: any) => {
        console.log(res, 'detaillist')
        if (res.terminalEnsureStaffList?.length) {
            tableData1.value = res.terminalEnsureStaffList
        } else {
            tableData1.value = []
        }
    })
}

watch(
    () => props.show,
    (newval) => {
        innerVisible.value = newval
        if (newval) {
            cxbdkhmc.value = ''
            deptId.value = ''
            saleId.value = ''
            pageInfo.value.pageSize = 10
            pageInfo.value.pageNum = 1
            searchlist()
            getDeptList({ type: 1 }).then((res: any) => {
                console.log(res)
                deptoptions.value = res
            })
        }
    }
)
const deptoptions = ref<any>([])
watch(innerVisible, (newval) => {
    emits('update:show', newval)
})
</script>

<style lang="scss" scoped>
.blue {
    color: #3e5ff5;
}

.pointer {
    cursor: pointer;
}

.top {
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .text {
        background-color: #fdf1ed;
        padding: 5px 20px;
        border-radius: 6px;
        color: #ef885e;
    }
}
</style>
